<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>TalkJS Unread Counter</title>

    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div class="container" style="max-width: 800px">
      <div class="row">
        <h1>TalkJS Unread Counter Example</h1>
        <h2>
          Unread conversations:
          <span id="unread-message-count"></span>
        </h2>
        <p>
          To write replies and test the unreads, open `
          <a href="./other.html" target="_blank">other.html</a>` in another tab
          or window.
        </p>
        <p>
          Learn more in the TalkJS docs:
          <a
            href="https://talkjs.com/docs/Reference/JavaScript_Chat_SDK/Session/#Unreads"
            >JS SDK Unreads</a
          >
        </p>
        <p style="font-size: 75%">
          Note: Please update the TalkJS credentials in source.
        </p>
      </div>
      <div class="row">
        <div
          class="col-md-12"
          id="talkjs-container"
          style="height: 500px"
        ></div>
      </div>
    </div>
    <script>
      (function (t, a, l, k, j, s) {
        s = a.createElement("script");
        s.async = 1;
        s.src = "https://cdn.talkjs.com/talk.js";
        a.head.appendChild(s);
        k = t.Promise;
        t.Talk = {
          v: 3,
          ready: {
            then: function (f) {
              if (k)
                return new k(function (r, e) {
                  l.push([f, r, e]);
                });
              l.push([f]);
            },
            catch: function () {
              return k && new k();
            },
            c: l,
          },
        };
      })(window, document, []);
    </script>
    <script>
      Talk.ready
        .then(
          function () {
            const me = new Talk.User("sample_user_alice");
            const session = new Talk.Session({
              // Replace <YOUR_APP_ID> with your own appId which you can find in the **Session** tab of your
              // TalkJS dashboard (https://talkjs.com/dashboard)
              appId: "<YOUR_APP_ID>",
              me: me,
            });
            const other = new Talk.User("sample_user_sebastian");

            // You control the ID of a conversation. oneOnOneId is a helper method that generates
            // a unique conversation ID for a given pair of users.
            const conversationId = Talk.oneOnOneId(me, other);
            const conversation =
              session.getOrCreateConversation(conversationId);
            conversation.setParticipant(me);
            conversation.setParticipant(other);

            const inbox = session.createInbox({
              selected: conversation,
            });
            inbox.mount(document.getElementById("talkjs-container"));
            session.unreads.onChange(function (conversationIds) {
              var unreadCount = conversationIds.length;
              document.getElementById("unread-message-count").innerHTML =
                unreadCount;
              console.log("Conversation IDs", conversationIds);
            });
          },
          function (e) {
            console.log(e);
          }
        )
        .catch(function (e) {
          console.log(e);
        });
    </script>
  </body>
</html>
